<template>
  <div>
    <el-dialog
      :visible.sync="dialog.edit"
      :close-on-click-modal="false"
      title="评论回复"
      width="80%"
      append-to-body
      @closed="dialogClosed('editForm')"
    >
      <el-form ref="editForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="评论详情" prop="comments">
              <el-input type="textarea" v-model="form.comments" placeholder="请输入评论详情" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="回复详情" prop="reply">
              <el-input type="textarea" v-model="form.reply" placeholder="请输入回复详情" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.edit = false">取消</el-button>
        <el-button type="primary" @click="edit" :loading="loading.edit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
import UploadImage from '@/components/Upload/UploadImage'
import Tinymce from '@/components/Tinymce'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'GoodsCommentReplyDialog',
  components: {
    UploadImage,
    Tinymce,
  },
  data() {
    return {
      dialog: {
        edit: false,
      },
      loading: {
        edit: false,
      },
      form: {
        userId: undefined,
        userPhone: undefined,
        userNickname: undefined,
        userHeadicon: undefined,
        userIsActive: undefined,
        shopId: undefined,
        shopTitle: undefined,
        shopIsActive: undefined,
        goodsId: undefined,
        goodsTitle: undefined,
        goodsIsActive: undefined,
        goodsSkuId: undefined,
        skuTitle: undefined,
        skuPicUrl: undefined,
        skuIsActive: undefined,
        price: undefined,
        skuInfo: undefined,
        quantity: undefined,
        commentLevel: undefined,
        commentRate: undefined,
        comments: undefined,
        appendComment: undefined,
        reply: undefined,
        stickStatus: undefined,
      },
      validateRules: {
        userId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        userPhone: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 11,
            message: '必须1-11个字符',
            trigger: 'blur',
          },
        ],
        userNickname: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        userHeadicon: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        userIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        shopId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        shopTitle: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        shopIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        goodsId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        goodsTitle: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },

          {
            type: 'string',
            min: 1,
            max: 100,
            message: '必须1-100个字符',
            trigger: 'blur',
          },
        ],
        goodsIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        goodsSkuId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        skuTitle: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 255,
            message: '必须1-255个字符',
            trigger: 'blur',
          },
        ],
        skuPicUrl: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        skuIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        price: [
          {
            type: 'number',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        skuInfo: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        quantity: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change',
          },
        ],
        comments: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 1000,
            message: '必须1-1000个字符',
            trigger: 'blur',
          },
        ],
        appendComment: [
          {
            type: 'string',
            min: 1,
            max: 1000,
            message: '必须1-1000个字符',
            trigger: 'blur',
          },
        ],
        reply: [
          {
            type: 'string',
            min: 1,
            max: 1000,
            message: '必须1-1000个字符',
            trigger: 'blur',
          },
        ],
      },
      dataDictCodes: ['YES_NO', 'COMMENT_LEVEL'],
      selects: {
        userIsActiveSelect: [],
        shopIsActiveSelect: [],
        goodsIsActiveSelect: [],
        skuIsActiveSelect: [],
        commentLevelSelect: [],
        stickStatusSelect: [],
      },
      resUrl: resUrl,
    }
  },
  computed: {},
  mounted() {
    utils
      .getDataDict(this.dataDictCodes)
      .then((response) => {
        if (response) {
          
        }
      })
      .catch((error) => {})
  },
  methods: {
    dialogClosed(formRef) {
      this.$refs[formRef].resetFields()
      for (let key in this.form) {
        this.form[key] = undefined
      }
    },
    add() {
      this.$emit('add')
    },
    edit() {
      this.$emit('edit')
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    imgUploadSuccess(formProp, url) {
      this.form[formProp] = url
    },
    imgRemoveSuccess(formProp) {
      this.form[formProp] = undefined
    },
  },
}
</script>

<style>
</style>